<template>
  <div class="login" v-title="title">
    <login-close></login-close>
    <form class="login-form">
      <p class="login-title">{{title}}</p>
      <phone ></phone>
      <capt-sms ></capt-sms>
      <div class="item forget-item blank"></div>
      <div class="item"><p class="form-btn2 btn3" @click="submit">快捷登录</p></div>
      <p class="btn-under font1" @click="goToTarget('register')">新用户注册</p>
    </form>
    <div class="loginType">
      <p class="item" @click="getThirdUrl('wx')" v-if=" platform === 'WXH5' "><i class="iconfont icon-weixin1 wx"></i><span>微信登录</span></p>
      <!--<p class="item" @click="getThirdUrl('qq')"><i class="iconfont icon-koukou qq"></i><span>QQ登录</span></p>-->
      <!--<p class="item" @click="getThirdUrl('wb')"><i class="iconfont icon-sina wb"></i><span>微博登录</span></p>-->
      <p class="item" @click="goToTarget('password')"><i class="iconfont icon-mimadenglu mm"></i><span>密码登录</span></p>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import phone from '../../component/login/phoneIpt.vue'
  import loginClose from '../../component/login/close.vue'
  import captSms from '../../component/login/captSms.vue'
  import {loginService} from '../../service/loginService'
  import {commonService} from '../../service/commonService'
  export default {
    components: {"phone": phone, 'login-close': loginClose, 'capt-sms': captSms},
    props: [],
    data () {
      this.$store.state.loginStore.smsType = 2;
      return {
        title:'手机验证码登录',
        msg: {type: 0 },
        phoneNo: '', //手机号
        kaptchaValue: '',
        smsValue: '', //短信验证码
        platform: 'WXH5', //平台
        loginType: '',
        errorMessage: '' //错误信息暂存字段
      }
    },
    mounted: function () {
      let that = this
      that.platform = loginService.getPlatForm();
      localStorage.platform = that.platform;
      localStorage.pathId = that.$route.params.shopId;
    },
    methods: {
      submit () { //表单提交的方法
        let that = this
        let mess = '';
        // 赋值区域 Begin
        that.phoneNo =that.$store.state.loginStore.phoneNo; //手机号
        that.smsValue =that.$store.state.loginStore.messValidate; // 短信验证码
        // 赋值区域 end
        mess = loginService.formValidate(1, 0, 1, 0, {phoneNo: that.phoneNo, smsValue: that.smsValue, pwd: that.pwd});
        if(typeof mess != 'undefined') {
          if(mess.trim('').length > 0){
            that.pop(mess);
            return false;
          }
        }
        else{
          loginService.phoneLogin({platform: localStorage.platform, phone: that.phoneNo, smsCode: that.smsValue, type: 2}).then(function (res) {
//            console.log('phone login', res)
            if(res.data.success){
              localStorage.token = res.data.datas;
              let JWT = res.data.datas.split('.');
              let info = JWT[1];
                loginService.packageUserInfo(info);
              // 清空倒计时
              if(that.$store.state.loginStore.timer > 0){
                clearInterval(that.$store.state.loginStore.timer)
              }
              // that.goToTarget('');//跳转到来的页面
                that.$router.replace({name: 'home'})

            }else{
              //if(res.data.code >= 512102 && res.data.code >= 512110) { // 短信验证码不正确，请重新输入
                that.pop(res.data.message)
              //}
            }
          });
        }
      },
      getThirdUrl (loginType) {
        let that = this, jumpRouter = '', wxscope = '';
        if(loginType === 'qq') {
          that.loginType = 'QQ';
          jumpRouter = 'qqlogin';
          wxscope = '';
        }
        if(loginType === 'wx') {
          that.loginType = 'WEIXIN';
          jumpRouter = 'wxlogin';
          wxscope = 'snsapi_userinfo';
        }
        if(loginType === 'wb') {
          that.loginType = 'WEIBO';
          jumpRouter = 'wblogin';
          wxscope = '';
        }
          loginService.getOauth({loginType: that.loginType, platform: localStorage.platform, jumpRouter: jumpRouter,wxscope: wxscope}).then(function (res) {
//          console.log('oauth', res);
          if(res.data.success){
            window.location.href = res.data.datas;
          }else {}
        });
      },
      pop (mess) { //弹框的方法
        let that = this
        commonService.autoCloseModal(that, mess, 1);
      },
      goToTarget (path) { //返回登录
        let that = this
        if(typeof path != 'undefined' && path.trim().length > 0){
          this.$router.replace({name: path})
        }
        else{
            if(that.$store.state.redirect_uri && that.$store.state.redirect_uri.name){
                let name = that.$store.state.redirect_uri.name, params = that.$store.state.redirect_uri.params;
                that.$router.replace({name: name, params: params})
                that.$store.state.redirect_uri = {}
            }else if(localStorage.redirectUrl && localStorage.redirectUrl!="undefined"){
                let url = localStorage.redirectUrl
                localStorage.removeItem('redirectUrl')
                window.location.href = url
            }else{
                that.$router.replace({name: 'home'})
            }

        }
      }
    },
    watch: {
      errorMessage (cur, old) {
        if(cur.length > 0){
          this.pop(cur); // 弹框
        }
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/css/login.less";
</style>